import { Injectable } from '@angular/core';
import { ResizeObserver } from '@juggle/resize-observer';

export class ResizeObserverObject {
  nativeElement: Element;
  constructor(private resizeObserver: ResizeObserver) {}

  unobserve(): void {
    this.resizeObserver.unobserve(this.nativeElement);
  }
}

@Injectable({
  providedIn: 'root',
})
export class ResizeObserverService {
  observe(nativeElement: Element, callBack): ResizeObserverObject {
    const resizeObserver = new ResizeObserver((mutations, observer): void => {
      callBack(mutations, observer);
    });
    const resizeObserverObject = new ResizeObserverObject(resizeObserver);

    resizeObserverObject.nativeElement = nativeElement;
    resizeObserver.observe(nativeElement);

    return resizeObserverObject;
  }
}
